<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '家长评价',
    },
    anonymous: false
  }
</route>

<script setup lang="ts">
import { getRateDetail, getRateList } from '@/apis/parent'
import ProPicker from '@/components/ProPicker.vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

const campusList = ref([])

const classId = ref()
const currentLesson = ref({})
const lessonList = ref([])
const rateList = ref([])

const getDetail = async (id) => {
  const res = await getRateDetail(id)
  rateList.value = res || []
}

const getList = async () => {
  const res = await getRateList(userStore.userInfo?.id)
  lessonList.value = res || []
  campusList.value = (res || []).map(item => ({ label: `${item.className} ${item.title}`, id: item.lessonId }))
  classId.value = campusList.value[0].id
  currentLesson.value = lessonList.value[0]
  getDetail(campusList.value[0].id)
}

const pickerChange = (e) => {
  const arr = lessonList.value.filter(item => item.lessonId === e)
  if (arr.length) {
    currentLesson.value = arr[0]
  }
  getDetail(e)
}

onLoad(() => {
  getList()
})
</script>

<template>
  <view class="px py">
    <view class="border-rd-[16rpx] bg-white p-[24rpx]">
      <ProPicker
        v-model="classId" class="w-full" :select-first="true" :options="campusList"
        @change="pickerChange"
      >
        <wd-icon name="caret-down-small" size="32rpx" color="#666" />
      </ProPicker>
      <view class="mt-1 font-size-[24rpx] color-[#4E5969]">
        {{ currentLesson.lessonDate }} ·
        {{ currentLesson.timeTempleName }}
      </view>
      <view class="mt-2 flex items-center">
        <view class="flex-1 font-size-[24rpx] color-[#4E5969]">
          共{{ currentLesson.parentEvaluationCount }}位家长评价
        </view>
        <view class="flex flex-1 items-center justify-end">
          <wd-rate v-model="currentLesson.avgScore" readonly />
          <text class="ml-2">
            {{ (currentLesson.avgScore || 0).toFixed(1) }}
          </text>
        </view>
      </view>
    </view>
    <view class="mt-4">
      <view>评价详情</view>
      <view
        v-for="(item, index) in rateList" :key="index"
        class="mt-[24rpx] border-rd-[16rpx] bg-white p-[24rpx]"
      >
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <text class="font-size-[30rpx]">
              {{ item.studentName }}
            </text>
            <!-- <wd-icon v-if="true" name="gender-female" size="30rpx" color="#FF0088"></wd-icon>
            <wd-icon v-else name="gender-male" size="30rpx" color="#3c74df"></wd-icon> -->
          </view>
          <wd-rate v-model="item.score" readonly />
        </view>
        <view class="mt-2 font-size-[28rpx] color-[#4E5969]">
          {{ item.content }}
        </view>
        <view class="mt-2 text-right font-size-[24rpx] color-[#4E5969]">
          {{ item.evaluationTime }}
        </view>
      </view>
      <view v-if="!rateList.length">
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>
